
<template>
    <a-modal :title="modalTitle" width="1200px" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" :footer="false">
        <div class="employee-box height100">
        <!---------- 查询表单form begin ----------->
        <a-form class="smart-query-form">
          <a-row class="smart-query-form-row">
            <!-- <a-form-item label="设备类型" class="smart-query-form-item">
                <a-select  style="width: 150px" v-model:value="queryForm.deviceType" placeholder="设备类型" >
                  <a-select-option v-for="item in dictValueList" :key="item.valuecode" :value="item.valueCode">{{ item.valueName }}</a-select-option>
                </a-select>
              </a-form-item> -->
            <a-form-item label="日期" class="smart-query-form-item" style="margin-right: 20px">
              <a-range-picker
                show-time
                v-model:value="chooseTimeRange"
                @change="changeCreateDate"
                :presets="defaultTimeRanges"
                format="YYYY-MM-DD HH:mm:ss"
                style="width: 400px"
              />
            </a-form-item>
            <a-form-item class="smart-query-form-item">
              <a-button type="primary" @click="queryData">
                <template #icon>
                  <SearchOutlined />
                </template>
                查询
              </a-button>
              <a-button @click="resetQuery" class="smart-margin-left10">
                <template #icon>
                  <ReloadOutlined />
                </template>
                重置
              </a-button>
            </a-form-item>
          </a-row>
        </a-form>
        <!---------- 查询表单form end ----------->

        <a-card size="small" :bordered="false" :hoverable="true">
          <!---------- 表格操作行 begin ----------->
          <a-row class="smart-table-btn-block">
            <div></div>
            <div class="smart-table-setting-block">
              <TableOperator v-model="columns" :tableId="null" :refresh="queryData" />
            </div>
          </a-row>
          <!---------- 表格操作行 end ----------->

          <!---------- 表格 begin ----------->
          <a-table
            size="small"
            :dataSource="tableData"
            :columns="columns"
            rowKey="deviceId"
            bordered
            :loading="tableLoading"
            :pagination="false"
          >
            <!-- <template #bodyCell="{ text, column }">
              <template v-if="column.dataIndex === 'usageStatus'">
                <span>{{ getDictName(usageStatusDictValueList, text) }}</span>
              </template>
            </template> -->
          </a-table>
          <!---------- 表格 end ----------->

          <div class="smart-query-table-page">
            <a-pagination
              showSizeChanger
              showQuickJumper
              show-less-items
              :pageSizeOptions="PAGE_SIZE_OPTIONS"
              :defaultPageSize="queryForm.pageSize"
              v-model:current="queryForm.pageNum"
              v-model:pageSize="queryForm.pageSize"
              :total="total"
              @change="queryData"
              @showSizeChange="queryData"
              :show-total="(total) => `共${total}条`"
            />
          </div>
        </a-card>
      </div>
  
      
    </a-modal>
  </template>
  <script setup>
  import { reactive, ref, nextTick } from 'vue';
  import _ from 'lodash';


  import { warningApi } from '/@/api/main/warning/warning-api';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
import { smartSentry } from '/@/lib/smart-sentry';
import TableOperator from '/@/components/support/table-operator/index.vue';
import { dictApi } from '/src/api/support/dict-api';
import { defaultTimeRanges } from '/@/lib/default-time-ranges';

  
  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false);
    const modalTitle = ref('预警信息')
  function show(rowData) {
    modalTitle.value = rowData.deviceName + ' 预警信息';
    queryForm.deviceId = rowData.deviceId;
    queryData();
    visibleFlag.value = true;
  }
  
  function onClose() {
    visibleFlag.value = false;
  }


// ---------------------------- 数据初始化 ----------------------------
// 获取设备类型
const dictValueList = ref([]);


// 查询字典值
async function queryDict() {
  // 获取设备类型字典
  let res = await dictApi.valueList('device_type');
  dictValueList.value = res.data;

}
// 初始化机构树
const orgTreeSelectionRef = ref();

// 表头
const columns = ref([
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    align: 'center',
    width: 300,
    ellipsis: true,
  },

  {
    title: '负责人',
    dataIndex: 'recipient',
    align: 'center',
    width: 200,
    ellipsis: true,
  },
  {
    title: '预警信息',
    dataIndex: 'msg',
    align: 'center',
    ellipsis: true,
  },
]);

// ---------------------------- 查询数据表单和方法 ----------------------------

const queryFormState = {
  startTime: undefined, //自选开始日期
  endTime: undefined, // 自选结束日期
  stationId: undefined, //所属支门泵站
  pageNum: 1,
//   pageSize: PAGE_SIZE,
    pageSize: 10,
};
// 处理选择日期范围
const chooseTimeRange = ref([]);

function changeCreateDate(value, dateString) {
  queryForm.startTime = dateString[0];
  queryForm.endTime = dateString[1];
}
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);

// 重置查询条件
function resetQuery() {
  chooseTimeRange.value = null;
  let pageSize = queryForm.pageSize;
  Object.assign(queryForm, queryFormState);
  queryForm.pageSize = pageSize;
  queryData();
}


// 查询
function onSearch() {
  queryFormState.pageNum = 1;
  queryData();
}

// 切换分页
function onPageChange(pagination) {
  queryForm.pageNum = pagination.current;
  queryForm.pageSize = pagination.pageSize;
  queryData();
}

// 切换每页显示条数
function onShowSizeChange(pagination) {
  queryData();
}
// 查询数据
async function queryData() {
  tableLoading.value = true;
  try {
    let queryResult = await warningApi.queryPage(queryForm);
    tableData.value = queryResult.data.records;
    total.value = queryResult.data.total;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}




  
  defineExpose({
    show,
  });
  </script>
  